<template>

    <div class="Login">

        <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                v-loading="loading"
        >

            <el-form-item label="学号" prop="school_id">
                <el-input
                        v-model="ruleForm.school_id"
                        type="text"
                        autocomplete="off"
                />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input
                        v-model="ruleForm.password"
                        type="text"
                        show-password='show-password'
                        autocomplete="off"/>
            </el-form-item>


            <!--    <el-form-item label="Age" prop="age">-->
            <!--      <el-input v-model.number="ruleForm.age"/>-->
            <!--    </el-form-item>-->

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" color="#409EFF" round="round"
                >登录
                </el-button
                >
                <el-button round="round" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from 'vue'
import type {FormInstance} from 'element-plus'
import axios from 'axios'
import {ElMessage} from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const loading = ref(false)

onMounted(() => {
    // 清空本地存储
    localStorage.clear()
    // 清空sessionStorage
    sessionStorage.clear()
    // 将 cookie 过期时间设置为一个过去的时间
    document.cookie = 'id=; expires=Thu, 01 Jan 1970 00:00:00 GMT'
    document.cookie = 'expiration_time=; expires=Thu, 01 Jan 1970 00:00:00 GMT'
})


const password = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.school_id !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
const school_id = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入学号'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    school_id: '',
    password: '',
})

const rules = reactive({
    password: [{validator: password, trigger: 'blur'}],
    school_id: [{validator: school_id, trigger: 'blur'}]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            loading.value = true
            console.log(ruleForm)
            console.log('submit!')
            login()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

// 发送请求
const login = () => {
    // 将school_id存入localStorage
    localStorage.setItem('school_id', ruleForm.school_id)
    axios.post('api/admin', {
        school_id: ruleForm.school_id,
        password: ruleForm.password
    }, {
        timeout: 10000 // 请求超时时间10s
    }).then((res: any) => {
        console.log(res)
        console.log(res.data.status)
        if (res.data.status === 'success') {
            console.log('登录成功')
            // setstorage
            localStorage.setItem('identity', 'admin')
            window.location.href = '/adminhome'
        } else {
            ElMessage.error('学号或密码错误')
            loading.value = false
            console.log('登录失败')
        }
    }).catch((err: any) => {
        loading.value = false
        ElMessage.error('请求超时')
    })


}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<!--设置表单居中-->
<!--<style scoped>-->
<!--  .demo-ruleForm {-->
<!--    width: 50%;-->
<!--    margin: 0 auto;-->
<!--  }-->
<!--</style>-->


<style scoped>
.Login {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 90vh;
}


</style>